<template>
    <Menu ref="sideMenu" :active-name="$route.name" :open-names="openedSubmenuArr" :theme="$store.state.app.menuTheme" width="auto" @on-select="changeMenu">
        <div class="menu-content">
          <template v-for="item in menuList">
              <MenuItem v-if="item.children.length<=1" :name="item.children[0].name" :key="item.path">
                  <Icon :type="item.icon" :size="iconSize" :key="item.path"></Icon>
                  <span class="layout-text" :key="item.path">{{ itemTitle(item) }}</span>
              </MenuItem>

              <Submenu v-if="item.children.length>1" :name="item.name" :key="item.path">
                  <template slot="title">
                      <Icon :type="item.icon" :size="iconSize"></Icon>
                      <span class="layout-text">{{ itemTitle(item) }}</span>
                  </template>
                  <template v-for="child in item.children">
                      <MenuItem :name="child.name" :key="child.name">
                          <Icon :type="child.icon" :size="iconSize" :key="child.name"></Icon>
                          <span class="layout-text" :key="child.name">{{ child.title }}</span>
                      </MenuItem>
                  </template>
              </Submenu>
          </template>
        </div>
    </Menu>
</template>

<script>
import util from '@/libs/util';
// import Vue from 'vue';
// import VueI18n from 'vue-i18n';
// Vue.use(VueI18n);
export default {
  data() {
    return {
      openedSubmenuArr: this.$store.state.app.openedSubmenuArr
    };
  },
  name: "sidebarMenu",
  props: {
    slotTopClass: String,
    iconSize: Number
  },
  computed: {
    tagsList() {
      return this.$store.state.app.tagsList;
    },
    menuList() {
      return this.$store.state.app.menus;
    }
  },
  methods: {
    changeMenu(active) {
      // if (active !== 'accesstest_index') {
      util.openNewPage(this, active);
      this.$router.push({
        name: active
      });
      // }
    },
    itemTitle(item) {
      if (typeof item.title === "object") {
        return this.$t(item.title.i18n);
      } else {
        return item.title;
      }
      return item.title;
    }
  },
  watch: {
    $route(to) {
      localStorage.currentPageName = to.name;
    },
    currentPageName () {
        this.openedSubmenuArr = this.$store.state.app.openedSubmenuArr;
        this.$nextTick(() => {
            if (this.$refs.sideMenu) {
                this.$refs.sideMenu.updateOpened();
            }
        });
    }
  },
  updated() {
    this.$nextTick(() => {
      if (this.$refs.sideMenu) {
        this.$refs.sideMenu.updateOpened();
      }
    });
  }
};
</script>

<style lang="less">


</style>
